The Workiva Design Challenge I received was to come up with an analog to the “Blackline” system of tracking document changes for a graphics heavy presentation medium. The mission is to “Compare and commit the changes in elements (Text, graphics, images) between 2 different versions of a presentation slide.”

I made some assumptions about this project to fill in the gaps of reality; I’m not going to be able to test my solution and the file exist as a unique format in a cloud, as opposed to having the program merge 2 seperate files and compose a 3rd.

With my mission and assumptions set, I went about brainstorming more details, to flesh out my approach. After brainstorming and coming up with my initial ideas about a solution, I’ll often audit another application or execution that exists out in the wild. If possible, I like to have at least 3 sources to interpret, and synthesize some details from those concepts. Given the fundamental uniqueness of this problem, I was going to need to come up with an equally unique solution.

At this point, I was excited to jump into the wireframing stage. I lined up all my interface requirements and I started doodling the workspace in my sketchbook (always start with paper). I quickly realized that I was moving too fast into the next phase of the workflow. I was designing the interface as a whole, not focusing on the exact process I was trying to illustrate. I had to bring my project scope back from the stratosphere.

This is where the “User Journey” becomes an extremely valuable tool. User research would help a lot at this point, but that isn’t an option. Just to get myself focused and empathizing with the user, I went to the beginning of the process, with the file being created and then shared. The user’s colleague examines the file and makes some changes to it. Because this is in the cloud, there’s no need to redownload a file, the user opens the file, and in the program navigates to the “Revisions Panel”.

I’m not able to do the revisions FOR the user. In the grander scheme of User Experience, there has to be input from the user, they need to feel as if they are a part of this process or they won’t want to use whatever it is we are designing. For this specific solution, obviously it is up to the user to select the changes that they want, so my objective is to guide their eye and make the process of comparison as easy as possibly.

After that narrative of a workflow analysis, here are the spec documents I would create, describing the details of the solution. This would usually include measurements and formatting for the UI. My primary tool is Adobe Illustrator, however I am branching into Adobe XD which is growing in its features list, allowing for higher fidelity rapid prototyping. I would have preferred to make an animated example, however I was given a 4 hour time limit on this project. Here are the specs:

The initial state after starting the revision process:

Switching to the revision slide for comparison:

Illustrating the different features with a visual aid feature: